<template>
  <div class="app-container">
    <div class="content">
      <img :src="url+$store.state.userInfo.userPortrait" alt="">
      <span class="desc">支持jpg、png格式图片，上传文件大小不超过2MB，图片尺寸需大于144×144.</span>
      <el-upload class="upload-demo btn" :http-request="upload" action="" :on-preview="handlePreview" :before-upload="beforeAvatarUpload" :on-remove="handleRemove" multiple :limit="1" :on-exceed="handleExceed">
        <el-button type="primary" @click="dialogVisible = false" round>本地上传</el-button>
      </el-upload>

    </div>
  </div>
</template>

<script>
import { uploadWebUserhead, selectUserhead } from "@/api/index";
import url from "@/api/base";
export default {
  data() {
    return {};
  },
  components: {},
  created() {
    this.url = url.userPortrait;
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    upload(content) {
      let formData = new FormData();
      formData.append("file", content.file);
      formData.append("userid", sessionStorage.getItem("userId"));
      uploadWebUserhead(formData).then(res => {
        console.log(res.data);
        selectUserhead().then(res => {
          let userInfo = res.data.date;
          this.userInfo = userInfo;
          this.$store.commit("SET_USERINFO", userInfo);
        });
        this.$message({
          message: "头像上传成功",
          type: "success"
        });
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  margin: 20px 100px;
  display: flex;
  flex-direction: column;
  img {
    width: 92px;
    height: 92px;
    margin-bottom: 30px;
  }
  .desc {
    font-size: 14px;
    color: #808080;
    line-height: 30px;
  }
  .desc:nth-child(3) {
    color: #c1c1c1;
  }
  .btn {
    margin-top: 50px;
    .el-button {
      background-color: #15c798;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      padding: 0px 33px;
    }
    .el-button--primary:focus,
    .el-button--primary:hover {
      background-color: #15c798;
    }
    .el-button--primary {
      border-color: transparent;
    }
  }
}
</style>
<style lang="less">
.custom-dz{
  .content .btn .el-button{
    background-color: #e93926;
  }
}
</style>



